<template>
  <div>
    <el-table
      v-loading="isLoading"
      class="table"
      :data="tableData"
      border
      max-height="600"
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        backgroundColor: '#3963fd',
        color: '#fff',
        'text-align': 'center',
      }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="serial_no" width="65" label="序号">
        <template slot-scope="scope">
          <a>{{ scope.row.serial_no }} </a>
        </template>
      </el-table-column>
      <el-table-column
        width="220"
        align="center"
        prop="file_number"
        label="文件编号"
      >
      </el-table-column>
      <el-table-column align="left" prop="title" label="文件材料题名">
      </el-table-column>
      <el-table-column width="80" align="center" prop="page_num" label="页号">
      </el-table-column>
      <el-table-column width="100" align="center" prop="remark" label="备注">
      </el-table-column>
      <el-table-column width="80" align="center" prop="is_pic" label="是否图纸">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_pic"
            disabled
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
            inactive-color="#ccc"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { BookCatalogs } from "../../../../api/jurisdiction/index";
export default {
  data() {
    return {
      tableData: [],
      //选择器
      multipleSelection: [],
      current_page: 20,
      pageSizeArr: [],
      per_page: 10,
      total: 0,

      isLoading: false,
      iDS: {
        table_name: "",
        book_title_id: "",
        per_page: "",
      },
    };
  },
  methods: {
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      console.log(1);
    },
    //分页
    handleSizeChange(val) {
      this.iDS.per_page = val;
    },
    async loadData() {
      this.iDS.book_title_id = this.$route.query.id;
      let res = await BookCatalogs(this.iDS);
      console.log(res);
      this.tableData = res.data.data.data;
      this.current_page = res.data.data.current_page;
      this.iDS.per_page = res.data.data.per_page;
      this.total = res.data.data.total;
      this.isLoading = false;
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/.el-button--mini {
  font-size: 16px !important;
}
</style>